<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" type="image/x-icon"
	href="${ctxPath}/static/images/lukk.ico" media="screen" />
<link rel="icon" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<link rel="bookmark" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<title>管理页面</title>
<script type="text/javascript"
	src="${ctxPath}/static/js/highChart/highcharts.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/highChart/modules/exporting.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/highChart/modules/offline-exporting.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/highChart/themes/grid-light.js"></script>
</head>
<body class="sticky-header"
	onload="indexmenu('${oneMenu}','${twoMenu}');">
	<%@ include file="../index/index.jsp"%>
	<section>
		<div class="main-content" style="overflow-y: auto">
			<!-- 地址栏-->
			<div class="page-heading">
				<h3>鹿客帮</h3>
				<ul class="breadcrumb">
					<li><a>数量统计 </a></li>
					<li class="active">区域统计</li>
				</ul>
			</div>
			<div class="panel-body" style="padding-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading">统计城市</div>
					<div class="panel-body" style="height: 65px">
						<form id="formSearch" class="form-horizontal">
							<div class="form-group" style="margin-top: 5px">
								<div class="form-inline col-md-1"></div>
								<div class="form-inline col-md-3">
									省份： <select id="allocatedProvinceSelect" name=""
										style="width: 200px"
										class="selectpicker show-tick form-control"
										data-live-search="false">
										<option value="0">未选择省份</option>
									</select>
								</div>

								<div class="form-inline col-md-8">注释：点击省区域显示所有的员工，点击城市区域显示对应县，区域统计。</div>
						</form>
					</div>
				</div>
				<table id="tb_workerCensus" style="width: 1600px; height: 600px"></table>
			</div>
		</div>
	</section>
	<div class="modal fade" style="top: 10px; height: 800px;"
		id="showWorkersCountModal" tabindex="-1" role="dialog"
		aria-labelledby="showWorkersCountModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 900px; height: 800px;">
			<div class="modal-content">
				<div class="modal-body">
					<div class="clearfix">
						<div class="panel panel-warning">
							<!-- Default panel contents -->
							<div class="panel-heading">
								<h3 class="panel-title">区域统计</h3>
							</div>
							<div class="panel-body">
								<p>点击不同区域显示工人信息</p>
							</div>
							<!-- List group -->
							<ul id="areaCountGroup" class="list-group" style="height: 500px">
							</ul>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<div class="modal fade" style="top: 10px;" id="showWorkersModal"
		tabindex="-1" role="dialog" aria-labelledby="showWorkersModalLabel"
		aria-hidden="true">
		<div class="modal-dialog" style="width: 900px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="showWorkersModalLabel">该区域所有员工</h4>
				</div>
				<div class="modal-body">
					<!-- 展示所选员工的区域 -->
					<table id="tb_viewWorker"></table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
<!-- tables插件的引用 -->
<script src="${ctxPath}/static/js/bootstrap-table/bootstrap-table.js"></script>
<link href="${ctxPath}/static/js/bootstrap-table/bootstrap-table.css"
	rel="stylesheet" />
<script
	src="${ctxPath}/static/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
	var modalTableInit = new Object();
	$(function() {
		//加载信息的时候
		$.post('${ctxPath}/province/queryAllocatedProvinces', function(data) {
			$(data).each(
					function(index, currData) {
						console.info(currData.areaCode);
						$("#allocatedProvinceSelect").append(
								"<option value="+currData.areaCode+">"
										+ currData.name + "</option>");
					})
		});
		var oTable = new TableInit();
		modalTableInit = new ModalTableInit();
		oTable.Init();
		$("#allocatedProvinceSelect").change(function() {
			var opt = {
				
				pageNumber : 1,
				query : {
					offset : 0
				}
			};
			$("#tb_workerCensus").bootstrapTable('refresh', opt);
		});
	});
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#tb_workerCensus')
					.bootstrapTable(
							{
								url : '${ctxPath}/province/countTableByProvince', //请求后台的URL（*）
								method : 'post', //请求方式（*）
								striped : true, //是否显示行间隔色
								cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
								queryParams : oTableInit.queryParams,//传递参数（*）
								sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
								search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
								strictSearch : false,
								showColumns : false, //是否显示所有的列
								showRefresh : false, //是否显示刷新按钮
								minimumCountColumns : 2, //最少允许的列数
								clickToSelect : false, //是否启用点击选中行
								height : 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
								showToggle : false, //是否显示详细视图和列表视图的切换按钮
								cardView : false, //是否显示详细视图
								detailView : false, //是否显示父子表
								contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
								columns : [
										{
											field : 'province',
											title : '省份人员统计',
											width : '40%',
											align : "center",
											valign : "top",
											formatter : function(value, row,
													index) {
												var strs = new Array(); //定义一数组 
												strs = value.split("-"); //字符分割 
												return "<br/><br/><br/><br/><br/><font>"
														+ strs[0]
														+ "共有<a onclick='showWorkerByProvinceCode("
														+ strs[1]
														+ ")' style =\"color:red\">["
														+ strs[2]
														+ "]</a>个用户注册</font>";
											},
										},
										{
											field : 'city',
											title : '城市人员统计',
											width : '60%',
											align : "center",
											formatter : function(value, row,
													index) {
												var strs = new Array(); //定义一数组 
												strs = value.split("-"); //字符分割 
												return "<font color = 'red'><a  style =\"color:red\" onclick='showAreaCountModalByCityCode("
														+ strs[1]
														+ ")'>"
														+ strs[0]
														+ "</a></font>共有<a onclick='showWorkerByCityCode("
														+ strs[1]
														+ ")'  style =\"color:red\">["
														+ strs[2]
														+ "]</a>个用户注册";
											}
										} ],
								onLoadSuccess : function(data) {
									if (data.rows != null) {
										$('#tb_workerCensus').bootstrapTable(
												'mergeCells', {
													index : 0,
													field : 'province',
													colspan : 0,
													rowspan : data.rows.length
												});
									}
								}
							});
		};

		//得到查询的参数
		oTableInit.queryParams = function(params) {
			var temp = {
				provinceCode : $("#allocatedProvinceSelect").val()
			};
			return temp;
		};
		return oTableInit;
	};
	var ModalTableInit = function() {
		var oModalTableInit = new Object();
		//初始化Table
		oModalTableInit.Init = function() {
			$('#tb_viewWorker')
					.bootstrapTable(
							{
								url : '${ctxPath}/worker/queryWorkersByProvinceCode', //请求后台的URL（*）
								method : 'post', //请求方式（*）
								striped : true, //是否显示行间隔色
								cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
								queryParams : oModalTableInit.queryParams,//传递参数（*）
								sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
								search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
								strictSearch : false,
								showColumns : false, //是否显示所有的列
								showRefresh : false, //是否显示刷新按钮
								minimumCountColumns : 2, //最少允许的列数
								clickToSelect : false, //是否启用点击选中行
								uniqueId : "workerId", //每一行的唯一标识，一般为主键列
								showToggle : false, //是否显示详细视图和列表视图的切换按钮
								cardView : false, //是否显示详细视图
								detailView : false, //是否显示父子表
								pagination : true, //是否显示分页（*）
								sortable : false, //是否启用排序
								contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
								sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
								pageNumber : 1, //初始化加载第一页，默认第一页
								pageSize : 12, //每页的记录行数（*）
								pageList : [ 12, 25, 50 ],
								height : 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
								columns : [
										{
											field : 'name',
											title : '员工姓名',
											width : '20%',
											align : "center",
										},
										{
											field : 'phone',
											title : '员工手机',
											width : '20%',
											align : "center",
										},
										{
											field : 'workSpaces',
											title : '员工工作区域',
											width : '60%',
											align : "center",
											formatter : function(value, row,
													index) {
												var returnValue = "";
												$(value)
														.each(
																function(index,
																		currData) {
																	returnValue = returnValue
																			+ " "
																			+ currData.workerSpaceName;
																})
												return returnValue;
											}
										} ],
							});
		};
		//得到查询的参数
		oModalTableInit.queryParams = function(params) {
			var temp = {
				provinceCode : provinceCode,
				limit : params.limit, //页面大小
				offset : params.offset, //页码
				queryType : queryType
			};
			return temp;
		};
		return oModalTableInit;
	};
	var provinceCode;
	var queryType;
	function showWorkerByProvinceCode(areaInfo) {
		provinceCode = areaInfo;
		queryType = 0;
		modalTableInit.Init();
		var opt = {
			pageNumber : 1,
			query : {
				offset : 0
			}
		};
		$("#tb_viewWorker").bootstrapTable('refresh', opt);
		$("#showWorkersModal").modal('show');
	}
	function showWorkerByCityCode(areaInfo) {
		provinceCode = areaInfo;
		queryType = 1;
		modalTableInit.Init();
		var opt = {
			pageNumber : 1,
			query : {
				offset : 0
			}
		};
		//从新开始计数
		$("#tb_viewWorker").bootstrapTable('refresh', opt);
		$("#showWorkersModal").modal('show');
	}
	function showWorkerByCountryCode(areaInfo) {
		provinceCode = areaInfo;
		queryType = 2;
		modalTableInit.Init();
		var opt = {
			pageNumber : 1,
			query : {
				offset : 0
			}
		};
		//从新开始计数
		$("#tb_viewWorker").bootstrapTable('refresh', opt);
		$("#showWorkersModal").modal('show');
	}
	function showAreaCountModalByCityCode(cityCode) {
		$("#areaCountGroup").empty();
		$
				.post(
						'${ctxPath}/province/countByCityCode',
						{
							cityCode : cityCode
						},
						function(data) {
							$(data)
									.each(
											function(index, currData) {
												$("#areaCountGroup")
														.append(
																'<li class="list-group-item">'
																		+ currData.country
																		+ '<span class="badge badge-warning" onclick="showWorkerByCountryCode('
																		+ currData.code
																		+ ')">这个区域有'
																		+ currData.count
																		+ '个</span></li>');
											})
						});
		$("#showWorkersCountModal").modal('show');
	}
</script>
</html>
